<template>
    <div ref="MapView" class="MapView">
        <div class="control">
            直线缓冲区计算
            <br>
            <br>
            <RadioGroup v-model="SenceMode" type="button">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
        </div>
    </div>
</template>

<script>
import simpleMap from '../../components/simpleMap'
var map = null;
var _Element = null;

var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]

import _json from './230000.json'
// import turf from 'turf'

// import lineIntersect from '@turf/line-intersect'

export default {
    data() { return { SenceMode: '2D', } },
    watch: { SenceMode(value) { map.SenceMode = value; }, },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView, { mapOptions: { senceMode: this.SenceMode } });
        map.addProviders(mapConfig);


        // 创建元素图形图层
        _Element = new simpleMap.ElementDataSource(map);

        _Element.add('polyline', {
            id: 'polyline',
            points: _json,
            color: 'RED', // 颜色
            width: 2 // 宽度
        })

        // console.log(_json);



        // console.time();
        // var __catch = null;

        // // var i = 0;
        // for (let i = 0; i < _json.length; i++) {
        //     const el = _json[i];
        //     const p1 = turf.point([el.longitude, el.latitude]);
        //     var buffered = turf.buffer(p1, 30);
        //     if (__catch) {
        //         __catch = turf.union(__catch, buffered, { steps: 3 })
        //     } else {
        //         __catch = buffered;
        //     };
        // }

        // // console.log(__catch);

        // console.timeEnd();

        // var points = [];

        // for (let i = 0; i < __catch.geometry.coordinates[0].length; i++) {
        //     const element = __catch.geometry.coordinates[0][i];
        //     points.push({ longitude: element[0], latitude: element[1] });
        // }


        // // 创建多边形元素
        // _Element.add('polygon', {
        //     id: 'polygon',
        //     points: points,
        //     color: '#DD00DD55', // 颜色
        // });






    },
    beforeDestroy() {
        // 页面被注销时，销毁地图
        map && map.destroy();
        map = null;
    }
}
</script>

<style>
.MapView {
    width: 100%;
    height: 100%;
}

.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
    z-index: 4;
}
.title {
    color: #fff;
}
.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}
.itemBox {
    margin-bottom: 5px;
}
</style>